import React, { useState} from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Uploader } from 'react-vant'
import {
    Form,
    Input,
    Button,
    Dialog,
    Divider,
    DatePicker,
    Selector,
    Slider,
    Stepper,
    Modal,
} from 'antd-mobile'
// import { Uploader } from 'react-vant'
// import { Divider } from 'antd-mobile'
function Index() {
    const navigate = useNavigate()
 const [visible, setVisible] = useState(false)
const defaultValue = [
  {
    url: 'https://img.yzcdn.cn/vant/sand.jpg', // 图片文件
  },
  {
    url: 'https://img.yzcdn.cn/vant/sand.text', // 其他文件
  },
]
    return (
        <div>
            <NavBar onBack={() => navigate()}>新增乘客</NavBar>
              <Uploader
      accept='*'
      defaultValue={defaultValue}
      onChange={v => console.log(v)}
    />
              <Button
        block
        onClick={() => {
          setVisible(true)
        }}
            >
                扫描证件添加
      </Button>
            <Modal
                visible={visible}
                content={
                    <div>

                    </div>
                }
                closeOnAction
                onClose={() => {
                    setVisible(false)
                }}
                
                actions={[
                    {
                        key: 'confirm',
                        text: '我知道了',
                    },
                    //  <Basic />
                ]}
            />
            <Form
                layout='horizontal'
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <Form.Header>水平布局表单</Form.Header>
                <Form.Item
                    name='name'
                    label='乘客类型'
                    rules={[{ required: true, message: '乘客不能为空' }]}
                >
                    <Input onChange={console.log} placeholder='请输入乘客' />
                </Form.Item>
                <Form.Item
                    name='hh'
                    label='姓名'
                    rules={[{ required: true, message: '姓名不能为空' }]}
                >
                    <Input onChange={console.log} placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item
                    name='zh'
                    label='证件类型'
                    rules={[{ required: true, message: '证件不能为空' }]}
                >
                    <Input onChange={console.log} placeholder='请输入证件' />
                </Form.Item>
                <Form.Item
                    name='lh'
                    label='证件号码'
                    rules={[{ required: true, message: '证件号码不能为空' }]}
                >
                    <Input onChange={console.log} placeholder='请输入证件号码' />
                </Form.Item>
                <Form.Item
                    name='ch'
                    label='手机号码'
                    rules={[{ required: true, message: '手机号码不能为空' }]}
                >
                    <Input onChange={console.log} placeholder='请输入手机号码' />
                </Form.Item>

            </Form>

        </div>
    )
}

export default Index
